import {
  createBaseSchema,
  createComponentLayout,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createInbizSchema,
  createSoureSchema,
  createControllerSchema
} from '@inbiz/setters';
import { createBehavior, createResource } from '@inbiz/core';
import { Tag } from './locale';
import MyAutoComplete from '@components/form/base/EformInput/designer/components/MyAutoComplete';
import SettingView from './components/Setting';
import { UnitEnum } from './components/shared';
import { Field } from '@formily/core';
export const commonProps = {};

export const defaultProps = {
  color: '#f5f5f5',
  fontColor: '#666',
  border: 1,
  radius: 20,
  showField: '',
  operation: {
    table: [],
    formItems: {
      width: {
        widowWidth: 60,
        widthSuffix: UnitEnum.percentage,
      },
      height: {
        windowHeight: 60,
        heightSuffix: UnitEnum.percentage,
      },
    },
    auth: '',
  } as {
    table: {
      operationType: 'delete' | 'add' | 'edit' | 'read';
      operationName: string;
      link?: string;
      field?:string
    }[];
    formItems: {
      width: {
        widowWidth: number;
        widthSuffix: UnitEnum;
      };
      height: {
        windowHeight: number;
        heightSuffix: UnitEnum;
      };
    };
    auth: string;
  },
  defaultType: 'Input',
  prefixCls: 'inbiz-tag',
};

// Shema
export const propsSchema = createInbizSchema({
  attribute: {
    ...createBaseSchema({
      // color: {
      //   type: 'string',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'ColorInput',
      // },
      // fontColor: {
      //   type: 'string',
      //   'x-decorator': 'FormItem',
      //   'x-component': 'ColorInput',
      // },
      showField: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': MyAutoComplete,
        'x-reactions': {
          dependencies: ['form.senior.soure.sourceModelUpdate'],
          fulfill: {
            // state: {
            //   visible: '{{$deps[0] == true}}',
            // },
            schema: {
              //@ts-ignore
              'x-component-props.update': '{{$deps[0]}}',
              'x-component-props.valueType': 'value',
            },
          },
        },
      },
      operation: {
        type: 'object',
        'x-decorator': 'FormItem',
        'x-component': (props: any) => {
          return <SettingView {...props} />;
        },
      },
    }),
  },
  style: {
    ...createComponentStyleSchema({
      color: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'ColorInput',
      },
      fontColor: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'ColorInput',
      },
      border: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component-props': {
          min: 0,
          precision: 0,
          addonAfter: 'px',
        },
        'x-component': 'NumberPicker',
      },
      radius: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component-props': {
          min: 0,
          precision: 0,
          addonAfter: 'px',
        },
        'x-component': 'NumberPicker',
      },
    }),
    ...createComponentLayout(),
    ...createDecoratorStyleSchema(),
  },
  senior: {
    // ...createModelSchema(),
    ...createSoureSchema({
      fieldChange: (form, value) => {
        const showField = form.query(/showField$/).take() as Field;
        const operation = form.query(/operation$/).take() as Field;
        let modelName;
        const list = value?.queryField?.map((item) => {
          if (item.Master) {
            modelName = item.ModelName;
          }
          return item.AnotherName ? item.AnotherName : item.FieldName.split('$')[1];
        });
        if (
          list?.indexOf(showField.value) === -1 &&
          showField.value &&
          `${showField.value}`.length > 0
        ) {
          showField.value = '';
        } else if (!showField.value || `${showField.value}`.length === 0) {
          showField.value = list?.[0];
        }
        const operationTable = operation.value.table.map((item: any) => {
          if (list?.indexOf(item.field)) {
            item.field = undefined;
          }
          return item;
        });
        operation.value.table = operationTable;
      },
    }),
  },
  controller: createControllerSchema({
    events: [{
      name: 'onClick',
      label: '点击',
      platform: 'web'
    }, {
      name: 'onload',
      label: '加载',
      platform: 'web'

    }, {
      name: 'onSuccess',
      label: '成功',
      platform: 'web',
    }, {
      name: 'onError',
      label: '报错',
      platform: 'web',
    }, {
      name: 'onDelete',
      label: '删除',
      platform: 'web',
    }, {
      name: 'onAdd',
      label: '添加',
      platform: 'web',
    }, {
      name: 'onOpen',
      label: '打开',
      platform: 'web',
    }, {
      name: 'onBeforeOperationAsync',
      label: '操作之前',
      platform: 'web',
      isConfigEvent: true
    },{
      name: 'onBeforeOpen',
      label: '打开之前',
      isConfigEvent: true,
      platform: 'web'
    },{
      name: 'onBeforeClose',
      label: '关闭之前',
      isConfigEvent: true,
      platform: 'web'
    },{
      name: 'onRequest',
      label: '自定义请求',
      isConfigEvent: true,
      platform: 'web'
    },{
      name: 'onData',
      label: '格式化数据',
      isConfigEvent: true,
      platform: 'web'
    }, {
      name: 'onParamFormat',
      label: '格式化参数',
      isConfigEvent: true,
      platform: 'web'
    }]
  })
});

export const Behavior = createBehavior({
  name: 'Tag',
  extends: ['Field'],
  selector: (node) => node.props?.['x-component'] === 'Tag',
  designerProps: {
    propsSchema,
  },
  designerLocales: Tag,
});

export const Resource = createResource({
  icon: 'Tag',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: {
          value: 'Tag.title',
          status: true,
        },
        'x-decorator': 'FormItem',
        'x-component': 'Tag',
        'x-component-props': defaultProps,
      },
    },
  ],
});
